<template>
    <div class="zhifuzj">
        <p>
            积分兑换
            <span>{{goodsByInfo.goodsIntergal}}积分 <del style="font-size:80%;color:#aaa;">￥{{goodsByInfo.goodsPrice}}</del>  </span>
        </p>
        <p>
            我的积分
            <span>{{goodsByInfo.personIntegral}}积分</span>
        </p>
        <p>
            可用余额
            <span>￥{{goodsByInfo.personBalance}}</span>
        </p>
        <p @click="chooseAddress">选择地址 <span style="font-size:90%;color:#aaa;" v-if="this.myAddress.addressId">{{ myAddress.address }}</span></p>
        <div class="zhifutit">
            <h3>支付方式：{{ zhifu[this.noactive].value }}</h3>
        </div>
        <!-- 地址组件 -->
        <mt-popup class="dizhicomponent" v-model="popupVisible" position="right" :modal="false">
            <MyAddress @closePop="closePop" @checkChoose="checkChoose" ></MyAddress>
        </mt-popup>

        <div class="zhifulx">
            <div class="zhifu-box" v-for="(item,index) in zhifu" :key="item.id">
                <i :class="{'iconfont':true,'icon-weixinzhifu':true,'no-active':(noactive == index)}"></i>
                <input v-model="zhifuType" :value="item.value" :class="{'input-zhifu':true}" :checked='item.isChecked'  @click="check(index)" type="radio" style="-webkit-appearance: none;">
                {{item.label}}
            </div>
        </div>

        <a class="payEnter" @click="payEnter()">确认</a>

    </div>
</template>

<script>
import MyAddress from '@/components/Myaddress.vue'
export default {
    components:{
        MyAddress
    },
    props:{
        goodsByInfo:{
            type:Object,
            required:true,
            default:()=>{
                return {}
            }
        }
    },
    data(){
        return{
            myAddress: {},
            popupVisible:false,
            noactive:0,
            zhifuType: '积分兑换',
            zhifu:[
            {
                id: 3,
                label: '积分兑换',
                value:'积分兑换',
                isChecked: true
            },
            {
                id: 0,
                label: '余额购买',
                value:'余额购买',
                isChecked: false
            },
            {
                id: 2,
                label: '微信支付',
                value:'微信支付',
                isChecked: false
            }
            ]
        }
    },
    computed:{
        payChannel(){
            if(this.noactive == 0){
                return 3;
            }
            if(this.noactive == 1){
                return 0;
            }
            if(this.noactive == 2){
                return 2;
            }
            return undefined;
        }
    },
    methods:{
        //地址组件
        closePop(){
            this.popupVisible = false;
        },
        checkChoose(data){
            this.myAddress.name = data.userName;
            this.myAddress.phone = data.mobileNo;
            this.myAddress.address = data.address;
            this.myAddress.addressId = data.addressId;
            this.popupVisible = false;
        },
        //
        check (index) {            
            this.zhifu.forEach((item) => {
                item.isChecked = false
            })
            this.payType = this.zhifu[index].value
            this.zhifu[index].isChecked = true
            this.noactive = index;
        },
        payEnter(){
            // return '/repairSuccess'
            this.$emit("payEnter",{payChannel:this.payChannel,addressId:this.myAddress.addressId})
        },
        chooseAddress(){
            this.popupVisible = true;
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/style/order.scss";
.zhifutit{
    width: 100%;
    h3{
        font:400 16px/2 '';
        padding-left:12px;
        padding-bottom: 8px;
    }
}
.zhifuzj{
    padding-top: 10px;
    >p{
        background: #fff;
        margin-bottom: 10px;
        font-size: 16px;
        color: #555;
        padding: 12px;
        display: flex;
        justify-content: space-between;
        span{
            color: #f22;
            font-size: 16px;
        }
    }
}
.zhifulx{
    .zhifu-box{
        padding: 5px 0;
        margin-bottom: 10px;
    }
    .icon-weixinzhifu{
        color: #ccc;
        
    }
    .no-active.icon-weixinzhifu{
        color: #00C800;
    }
}
.payEnter{
    display: block;
    width: 90%;
    margin: 30px auto;
    background: #FF5723;
    color:#fff;
    padding: 10px 0;
    border-radius:5px;
    text-align: center;
    font-size: 16px;
}
</style>


